<template>
  <div class="Message">
    <!-- 标题栏 -->
    <mt-header title="我的资料">
      <router-link slot="left" to="weipersonal">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <van-row>
      <van-col span="6" offset="9">
        <van-image round width="6rem" height="6rem" :src="uAvatar" />
      </van-col>
    </van-row>

    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup v-model="show">内容</van-popup>

    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
    </van-popup> -->

    <!-- <van-cell is-link @click="showPopup" >昵称</van-cell>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" @click="showPopup">
      <p style="color: black;">给自己换个萌萌哒的昵称吧</p>
      <van-cell-group>
        <van-field v-model="values" @click="show= true"  placeholder="给自己换个萌萌哒的昵称吧" />
        <van-button type="default">默认按钮</van-button>
      </van-cell-group>
    </van-popup> -->
    <!-- 昵称 -->
    <van-field
      readonly
      clickable
      label="昵称"
      :value="values"
      placeholder="昵称"
      @click="show = true"
    />
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <p style="color: black">给自己换个萌萌哒的昵称吧</p>
      <van-field v-model="values" placeholder="给自己换个萌萌哒的昵称吧" />
      <van-button type="default" @click="showPopup" block>保存</van-button>
    </van-popup>
    <!-- 年级 -->
    <van-field
      readonly
      clickable
      label="年级"
      :value="value"
      placeholder="选择年级"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 性别 -->
    <van-field
      readonly
      clickable
      label="性别"
      :value="sex"
      placeholder="选择性别"
      @click="showSex = true"
    />
    <van-popup v-model="showSex" round position="bottom">
      <van-picker
        show-toolbar
        :columns="sexs"
        @cancel="showSex = false"
        @confirm="onSex"
      />
    </van-popup>

    <!-- 时间 -->
    <van-field
      readonly
      clickable
      label="时间"
      :value="time"
      placeholder="选择时间"
      @click="showTime = true"
    />
    <van-popup v-model="showTime" round position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showTime = false"
        @confirm="onTime"
      />
    </van-popup>

    <!-- 学校 -->
    <van-field
      readonly
      clickable
      label="学校"
      :value="xuexiao"
      placeholder="输入学校"
      @click="showxy = true"
    />
    <van-popup v-model="showxy" position="bottom" :style="{ height: '30%' }">
      <p style="color: black">输入学校</p>
      <van-field v-model="xuexiao" placeholder="输入学校" />
      <van-button type="default" @click="showXue" block>保存</van-button>
    </van-popup>
    <!-- 专业 -->
    <van-field
      readonly
      clickable
      label="专业"
      :value="zhuanye"
      placeholder="输入专业"
      @click="showzy = true"
    />
    <van-popup v-model="showzy" position="bottom" :style="{ height: '30%' }">
      <p style="color: black">输入专业</p>
      <van-field v-model="zhuanye" placeholder="输入专业" />
      <van-button type="default" @click="showZhuan" block>保存</van-button>
    </van-popup>

    <van-cell-group>
      <van-cell title="我的账户" to="account" />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uAvatar: sessionStorage.uAvatar,
      // 专业
      showzy: false,
      zhuanye: "计算机",

      // 学校
      showxy: false,
      xuexiao: "四川师大",

      show: false, //昵称的
      values: sessionStorage.uName,

      value: "大三", //年级的
      showPicker: false,
      columns: [
        "大一",
        "大二",
        "大三",
        "大四",
        "研一",
        "研二",
        "研三",
        "在职",
        "其他",
      ],

      sex: "小姐姐", //性别的
      showSex: false,
      sexs: ["小姐姐", "小哥哥"],

      // 时间的
      time: `2021-0-17`,
      showTime: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
    };
  },

  methods: {
    // 专业
    showZhuan() {
      this.showzy = false;
    },
    // 学校
    showXue() {
      this.showxy = false;
    },
    // 昵称的
    showPopup() {
      this.show = false;
    },
    // 年级的
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    // 性别的
    onSex(sex) {
      this.sex = sex;
      this.showSex = false;
    },
    // 时间的
    onTime() {
      // let time = time.format('YYYY年MM-DD HH:mm:ss');

      let time = "2021-0-17";

      this.time = time;
      console.log(time);
      this.showTime = false;
    },
  },
};
</script>

<style lang="scss">
.Message {
  background-color: #fff;
  .mint-header {
    background-color: #eee;
    color: #222;
  }
  .van-row {
    margin: 15px 0;
  }
  .van-overlay {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
</style>